<template>
  <div class="citylist">
    <div class="hotcity">
      <div class="hotcityheader">
        热门城市
      </div>
      <div class="hotcitylist-wrap">
        <ul class="hotcitylist">
          <li class="hcity" v-for="item in hotCities" :key="item.id" @click="handelhotcity(item.name)">
            {{item.name}}
          </li>
        </ul>
      </div>

      <div class="letterheader">
        字母排序
      </div>
      <cityalphabet @touchchange="listerChild"></cityalphabet>

      <div v-for="(letteritem,index) in cityLetter" :key="index">
        <div class="letterheader">
          {{letteritem.letter}}
        </div>
        <ul class="letterlist">
          <li class="letter" v-for="item in letteritem.area" :key="item.id" @click="handelhotcity(item.name)">
            {{item.name}}
          </li>
        </ul>
      </div>
    </div>
  </div>

</template>

<script>
  import Alphabet from '../components/Alphabet'

  export default {
    name: "CityList",
    props: {
      hotCities: Array,
      cityLetter: Array,
    },
    components: {
      "cityalphabet": Alphabet
    },
    data() {
      return {
        city: [],
        listenletter:''
      }
    },
    methods:{
      listerChild (listenletter) {
        this.listenletter = listenletter;
      },
      handelhotcity(hotcity){
        this.$store.dispatch('changehotcity',hotcity);
        this.$router.push('/');
      }
    },
    watch:{
      listenletter(){
        console.log(this.listenletter);
      }
    },
  }
</script>

<style lang="stylus" scoped>
  @import "~styles/varibles.styl";
  @import "~styles/mixins.styl";
  .citylist {
    .hotcity {

      .hotcityheader {
        padding .24rem .3rem
        background-color: #f5f5f5
        font-size .24rem
      }

      .letterheader {
        padding .24rem .3rem
        background-color: #f5f5f5
        font-size .24rem
      }

      .hotcitylist-wrap {
        height 0
        padding-bottom 36.5%

        .hotcitylist {
          display flex
          flex-wrap wrap

          .hcity {
            width 33.1%
            height .9rem
            line-height .9rem
            text-align center
            border-bottom .02rem solid #ddd
            border-right .02rem solid #ddd

            &:nth-child(3n) {
              border-right: none
            }

            &:nth-child(n+7) {
              border-bottom: none
            }
          }
        }
      }

      .letterlist {
        display flex
        flex-wrap wrap

        .letter {
          width 16.55%
          height .9rem
          line-height .9rem
          text-align center
          ellopsis();
        }
      }
    }

  }
</style>
